<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>18-flex布局实例 - 常用的上中下布局结构</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.box {
	width: 600px;
}
.flex {
	display: flex;
}
.column {
	flex-direction: column;
}
	.ac-c{
		align-items: center;
	}
body {
}
.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.header {
	background-color: rgba(247,109,111,1.00);
	height: 100px;
}
.main {
	background-color: rgba(251,93,96,1.00);
	height: 800px;
}
.footer {
	background-color: rgba(255,116,119,1.00);
	height: 100px;
}
</style>
</head>

<body>
	<div class="flex column ac-c">
		<div class="header box">header</div>
		<div class="main box mt-10 mb-10">main</div>
		<div class="footer box">footer</div>
	</div>
</body>
</html>
